<template>
	<view class="content" style="flex-direction: column;height: 100vh;justify-content: space-between;">
		<view class="header" style="flex:1;background: #eee;overflow: scroll;">
			<!-- <js-error mode="top" ref="jsError" z-index="999"></js-error> -->
			<!-- 轮播图 -->
			<swiper v-if="picLunboList.length" class="swiper-box" :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval"
				indicator-active-color="#ffffff" :duration="duration">
				<swiper-item v-for="(item, index) in picLunboList" :key="index" @click="clickImg(item,'1')">
					<view class="swiper-item">
						<!--  mode="aspectFill"  -->
						<image class="image" :src="baseUrl + item.picUrl"/>
					</view>
				</swiper-item>
			</swiper>
			<view style="background: #eee;padding: 10px;">
				<view v-if="spData.cinvname" style="background-color: #fff;padding: 10px">
					<view style="font-weight: bold;font-size: 16px;margin-bottom: 10px;">{{spData.cinvname}}</view>
					<view style="display: flex;justify-content: space-between;">
						<view >商品条码:{{spData.cinvcode?spData.cinvcode:''}}</view>
						<view style="background:  bisque ;padding: 5px;color: #ff874b;border-radius: 5px">1{{spData.appUnitName}}起订</view>
					</view>
					<view>
						<text style="color: red;font-size: 20px;">￥{{ spData.appPrice?spData.appPrice:'暂无单价' }}</text>
						<text>/{{spData.appUnitName}}</text>
					</view>
				</view>

				<view style="margin-top: 10px;padding: 20px 10px;background-color: #fff;" v-if="picDetailList.length">
					<view style="font-weight: bold;font-size: 16px;margin-bottom: 10px;">
						产品介绍
					</view>
					<view style="margin-bottom: 10px;width: 100%;" v-for="(item, index) in picDetailList" :key="index" @click="clickImg(item,'2')">
						<image style="width: 100%;"  mode="widthFix" :src="baseUrl + item.picUrl" ></image>
					</view>

				</view>

			</view>
		</view>

		<view class="navigation">
			<view class="left">
				<!-- <view class="item">
							<u-icon name="server-fill" :size="40" :color="$u.color['contentColor']"></u-icon>
							<view class="text u-line-1">客服</view>
						</view>
						<view class="item">
							<u-icon name="home" :size="40" :color="$u.color['contentColor']"></u-icon>
							<view class="text u-line-1">店铺</view>
						</view> -->
				<view class="item car" @click="jumpCart">
					<u-badge class="car-num" :count="vuex_cartList" type="error" :offset="[-3, -6]"></u-badge>
					<u-icon name="shopping-cart" :size="40" :color="$u.color['contentColor']"></u-icon>
					<view class="text u-line-1">购物车</view>
				</view>
				<view class="item">
					<view style="font-size: 14px;color: red;">
						合计：￥{{cartTotalPrice}}
					</view>
					<view style="font-size: 14px;">
						总数量：{{cartTotalNum}}
					</view>
				
				</view>
			</view>
			<view class="right">
				<view class=" cart btn u-line-1" @click="butClick">加入购物车</view>
				<!-- <view class=" buy btn u-line-1" @click="show = true;buttext='立即购买'">立即购买</view> -->
			</view>



		</view>
		<u-popup v-model="show" mode="bottom" closeable>
			<view style="background-color: #fff;padding: 10px">
				<view style="font-weight: bold;font-size: 16px;margin-bottom: 10px;">{{spData.cinvname}}</view>
				<view style="display: flex;justify-content: space-between;">
					<view style="color: #aaa;">规格:{{spData.cinvstd?spData.cinvstd:''}}</view>
					<view style="background:  bisque ;font-size: 14px;padding: 3px;color: #ff874b;border-radius: 5px">
						1{{spData.appUnitName}}起订</view>
				</view>
				<view style="display: flex;justify-content: space-between;margin-top: 10px;">
					<view class="">
						<text style="color: red;font-size: 20px;">￥{{ spData.appPrice?spData.appPrice:'暂无单价' }}</text>
						<text>/{{spData.appUnitName}}</text>
					</view>
					<u-number-box input-width="120" input-height="60" v-model="spData.count" :min='1' @change="valChange"></u-number-box>
				</view>
				<view
					style="color: red;text-align: right;border-top:1px solid #aaa ;border-bottom:1px solid #aaa ;padding: 10px;margin: 10px 0;">
					合计：
					<text style="font-size: 20px;">￥{{sumPrice}}</text>
				</view>
				<view style="text-align: right;padding: 10px 0;">
					<text @click="submit"
						style="padding: 10px;background: #00aa00;color: #fff;border-radius: 5px">{{buttext}}</text>
				</view>
			</view>
		</u-popup>
	</view>

</template>

<script>
	import {
			mapState
		} from 'vuex';
	export default {
		data() {
			return {
				buttext: '确定',
				value: 1,
				show: false,
				indicatorDots: true,
				autoplay: true,
				interval: 2000, //切换的间隔时间
				duration: 500, //滑动动画时长

				info: [{
						colorClass: 'uni-bg-red',
						url: 'https://www.mnbtdm.com/upload/images/2023/8/31eeb699d9a518c5.jpg',

					},
					{
						colorClass: 'uni-bg-green',
						url: 'https://www.mnbtdm.com/upload/images/2023/8/e0a4a66f99b018ca.jpg',

					},
					{
						colorClass: 'uni-bg-blue',
						url: 'https://www.mnbtdm.com/upload/images/2023/8/58abc74c60ac8c4c.jpg',

					},
					{
						colorClass: 'uni-bg-blue',
						url: 'https://www.mnbtdm.com/upload/images/2023/8/c0e837336247bb4b.jpg',

					}, {
						colorClass: 'uni-bg-blue',
						url: 'https://www.mnbtdm.com/upload/images/2023/8/58abc74c60ac8c4c.jpg',

					}
				],

				spData: {
					count:1
				},
				sumPrice: 0,
				picDetailList:[],
				picLunboList:[],
				baseUrl:'',
				listArr:[]
			}
		},
		computed: {
			...mapState(['vuex_cartList']),
			// 购物车商品总价
			cartTotalPrice() {
				// 计算list列表中所有选中商品的价格
				var sum = 0
				this.listArr.forEach(el => {
					sum = el.sumPrice  + sum
				})
				return sum
			},
			// 购物车件数
			cartTotalNum() {
				// 计算list列表中所有选中商品的价格
				var num = 0
				this.listArr.forEach(el => {
					num = num + el.iqty;
				})
				return num
			},
		},
		onLoad(params) {
			this.listData();
			this.baseUrl = this.vuex_config.baseUrl
			let spData = JSON.parse(params.item)
			// this.spData = JSON.parse(params.item)
			this.$u.api.shop.shopInvForm({id:spData.id})
				.then(res => {
					this.spData = res.basInv
					this.picLunboList = res.picLunboList
					this.picDetailList = res.picDetailList
					this.spData.appPrice = this.spData.appPrice?this.spData.appPrice:'暂无单价'
					this.spData.count = 1
					this.sumPrice = this.spData.appPrice * 1
					console.log(res,'res=======');
				});
			
			// console.log(this.spData.count, 'this.spData.count==');
		},
		methods: {
			butClick(){
				if(this.spData.appPrice == '暂无单价'){
					this.$u.toast('暂无单价，无法加入购物车');
				}else{
					this.buttext='加入购物车';
					this.show = true;
				}
			}, 
			clickImg(item,flag) {
				let arr = []
				if(flag == '1'){
					arr = [...this.picLunboList]
				}else if(flag == '2'){
					arr = [...this.picDetailList]
				}
				let urls = arr.map(val => {
					return (this.baseUrl +  val.picUrl)
				})
				uni.previewImage({
					urls, //需要预览的图片http链接列表，多张的时候，url直接写在后面就行了
					current: this.baseUrl + item.picUrl, // 当前显示图片的http链接，默认是第一个
					success: function(res) {},
					fail: function(res) {},
					complete: function(res) {},
				})
			},
			// clickImg2(item) {
			// 	console.log(item);
			// 	let urls = [item.url]
			// 	uni.previewImage({
			// 		urls,
			// 		current: item.url, 
			// 		success: function(res) {},
			// 		fail: function(res) {},
			// 		complete: function(res) {},
			// 	})
			// },

			jumpCart() {
				// uni.reLaunch({
				// 	url: '/pages/btdm/index/cart/cart',
				// })
				uni.switchTab({
				  url: '/pages/btdm/index/cart/cart'
				})
				
			},
			valChange(e) {
				console.log('当前值为: ' + e.value)
				this.sumPrice = this.spData.appPrice * e.value
				console.log('this.spData.count: ' + this.spData.count)
			},
			listData(){
				this.$u.api.shop.cartListData({
					cusCode:this.vuex_basCus.code,
					createBy:this.vuex_user.userCode,
				})
				.then(res => {
						// let listArr = []
						// for (let key in res) {
						// 	res[key].forEach(item=>{
						// 			listArr.push(item)
						// 	})
						// }
						// this.$store.commit("modifyCartList",listArr.length)
						let arr = []
						for (let key in res) {
							res[key].forEach(item=>{
									if(item.busType == '0'){
										item.sumPrice = item.iqty * (item.shopInv.basInv.appPrice?item.shopInv.basInv.appPrice:'暂无单价')
									}else if(item.busType == '1'){
										item.sumPrice = item.iqty * (item.shopProductSell.fprice?item.shopProductSell.fprice:'暂无单价')
									}
									arr.push(item)
							})
						}
						this.listArr = arr
						this.$store.commit("modifyCartList",this.listArr.length)
				});
			},
			submit() {
				let that = this
				if (this.buttext == '立即购买') {
					this.$u.api.shop.shopCarBalanceForm({
						cusCode:this.vuex_basCus.code,
						selIds: this.spData.cinvcode
					})
					.then(res => {
						if(res.result == 'true'){
							uni.navigateTo({
								url: '/pages/btdm/index/order/submit?list=' + JSON.stringify(res.data),
							})
						}else{
							uni.showToast({
								title: res.message,
								icon: 'none',
							});
						}
					});
				} else {
					
					console.log(this.spData,'spData====');
					if(this.vuex_basCus.code && this.vuex_basCus.code != '00'){
						let data = {
							cusCode:this.vuex_basCus.code,
							busType:'0',
							busKey:this.spData.cinvcode,
							iqty:this.spData.count,
							fprice:this.spData.appPrice?this.spData.appPrice:'暂无单价',
							appUnitCode:this.spData.appUnitCode,
						}
						if(data.fprice != '暂无单价'){
							this.$u.api.shop.addToCart(data)
							.then(res => {
								if(res.result == 'true'){
									this.show = false;
									setTimeout(()=>{
										that.$u.toast(res.message);
									},500)
									this.listData()
								}else{
									uni.showModal({
										title: '提示',
										content: res.message,
										showCancel: false,
										success: function(res) {}
									});
									// this.$u.toast(res.message);
								}
									console.log(res,'=========');
								});
						}else{
							this.$u.toast('暂无单价，无法加入购物车');
						}
						
					}else{
						this.$u.toast('请先选择门店');
					}
					
					
					
					// let flag = true;

					// let arr = this.vuex_cartList.map(item => {
					// 	if (item.id == this.spData.key) {
					// 		flag = false;
					// 		item = {
					// 			id: this.spData.key,
					// 			name: this.spData.key,
					// 			isChecked: false,
					// 			price: this.spData.cat,
					// 			count: this.spData.count,
					// 			size: '迷你',
					// 			sumPrice: this.spData.cat * this.spData.count,
					// 			stock: 11,
					// 			img: this.spData.icon
					// 		}
					// 		console.log(item, 'item==');
					// 	}
					// 	return item

					// })
					// if (flag) {
					// 	arr.unshift({
					// 		id: this.spData.key,
					// 		name: this.spData.key,
					// 		isChecked: false,
					// 		price: this.spData.cat,
					// 		count: this.spData.count,
					// 		size: '迷你',
					// 		sumPrice: this.spData.cat * this.spData.count,
					// 		stock: 11,
					// 		img: this.spData.icon
					// 	})
					// }
					// this.$store.commit("modifyCartList", arr)
					// this.show = false;
				}
			}
		},


	}
</script>

<style lang="scss" scoped>
	page {
		width: 100%;
		height: 98%;
		text-align: center;
		overflow: scroll;
	}
	/deep/ .u-icon-plus{
	    width: 120rpx !important;
	}
	/deep/ .u-icon-minus {
	    width: 120rpx !important;
	}

	.content {
		/* text-align: center; */
		display: flex;
		flex-direction: column;
	}

	.swiper-box {
		/* object-fit: full; */
		height: 220px;
	}

	.swiper-box2 {
		/* object-fit: full; */
		/* height: 190px; */
		/* max-width:100%; */
		height: 150px;
	}

	.swiper-box3 {
		/* object-fit: full; */
		height: 146px;
		/* max-width: 100%;		 */
	}

	.swiper-item {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		justify-content: center;
		align-items: center;
		background-color: #fff;
		color: #fff;
	}

	.image {
		width: 750rpx;
		height: 220px;
		/* object-fit: cover; */
	}

	.image2 {
		width: 750rpx;
		height: 150px;
		/* object-fit: cover; */
		/* object-fit: contain; */
	}

	.image3 {
		/* width: 750rpx;
		height: 1400upx; */
		/* position: fixed;
		object-fit: contain; */
		width: 750rpx;
		height: 146px;
	}

	.action {
		/* position: fixed;
			top:100px;
			z-index: 9999; */
	}

	.warp {
		color: #000000;
	}

	.leftLine {
		width: 80px;
		height: 1px;
		background: linear-gradient(244deg, rgba(26, 26, 26, 1.0) 50%, rgba(255, 255, 255, 0) 100%);
	}

	.rightLine {
		width: 80px;
		height: 1px;
		background: linear-gradient(244deg, rgba(255, 255, 255, 0) 0%, rgba(26, 26, 26, 1.0) 50%);
	}

	.tag {
		margin-left: 4%;
	}

	.tag1 {
		margin-left: 5%;
	}

	.navigation {
		width: 100%;
		/* position: fixed;
		bottom: 96rpx;
		z-index: 111; */
		display: flex;
		justify-content: space-between;
		// margin-top: 100rpx;
		border: solid 1rpx #eee;
		background-color: #ffffff;
		padding: 16rpx;


		.left {
			display: flex;
			font-size: 20rpx;

			.item {
				margin: 0 30rpx;

				&.car {
					text-align: center;
					position: relative;

					.car-num {
						position: absolute;
						top: -10rpx;
						right: -10rpx;
					}
				}
			}
		}

		.right {
			display: flex;
			font-size: 28rpx;
			align-items: center;

			.btn {
				line-height: 66rpx;
				padding: 0 30rpx;
				border-radius: 36rpx;
				color: #ffffff;
			}

			.cart {
				background-color: #ed3f14;
				margin-right: 30rpx;
			}

			.buy {
				background-color: #00aa00;
			}
		}
	}
</style>